<!-- 账户管理-权限设置-权限配置 -->
<template>
  <div class="main-app" v-loading="loading">
    <el-page-header @back="cancel" :content="title" style="margin: 1%;"></el-page-header>
    <!-- 树形菜单区 -->
    <el-row style="width: 50%; margin-left: 25%" :gutter="50">
      <el-divider content-position="left">{{$t('common.title.selMenuAuth')}}</el-divider>
      <el-tree ref="tree"
        node-key="id"
        show-checkbox
        :check-strictly="true"
        :data="allMenuList"
        :default-checked-keys="checkedMenuIdList"
        :default-expanded-keys="[]"
        :props="defaultProps"
      />
    </el-row>
    <!-- 底部功能按钮区 -->
    <el-row style="margin-top: 100px; text-align: center">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button type="info" plain @click="cancel">{{$t('common.button.cancel')}}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save" :loading="saveLoading">{{$t('common.button.save')}}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="checkAll">{{$t('common.button.selAll')}}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="clearAll">{{$t('common.button.clearAll')}}</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {
  TreeMenuList,
  AllTreeMenuNodeList,
  UserRoleMenuListById,
  SubmitUserRoleMenu
} from '../../../api/menu.js';
export default {
  // 页面公共变量
  data() {
    return {
      isLoading: false,         // 是否显示加载框
      title: "权限配置",        // 顶部标题

      id: "",                   // 编辑数据的主键ID
      allMenuList: [],          // 树形菜单数据源
      checkedMenuIdList: [],    // 默认选中的菜单节点ID
      selectedMenuIdList: [],   // 已选中的菜单节点ID

      // 树形菜单默认配置项
      defaultProps: {
        label: 'label',
        children: 'children',
        disabled: 'disabled',
      },
    };
  },
  // 页面创建完成事件
  async created() {
    // 接收路由传递的参数
    const { id } = this.$route.params;

    // 将接收到的数据填充至页面公共变量
    this.id = id;
    this.title = this.$t('common.title.authConfig');

    // 执行初始化加载事件
    await this.init();
  },
  // 页面相关方法
  methods: {
    // 初始化加载事件
    async init() {
      // 打开加载框
      this.isLoading = true;

      // 获取数据
      await TreeMenuList().then(res => {
        if (res.success) {
          this.allMenuList = res.data;
        } else {
          this.$message({type: 'error', message: res.msg});
        }
      });
      await UserRoleMenuListById({
        Id: this.id,
      }).then(res => {
        if (res.success) {
          this.checkedMenuIdList = res.data2;
        } else {
          this.$message({type: 'error', message: res.msg});
        }
      });

      // 关闭加载框
      this.isLoading = false;
    },
    // 保存数据事件
    async save() {
      // 打开加载框
      this.isLoading = true;

      // 填充表单数据
      var ids = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()).join(',');
      const data = {
        Id: this.id,
        MenuIds: ids
      };

      // // 测试：查看已生成的表单内容，不提交数据
      // console.log(data)
      // return;

      // 提交数据
      await SubmitUserRoleMenu(data).then(res => {
        if (res.success) {
          this.$message({type: 'success', message: this.$t('common.prompt.success.edit')});

          // 关闭加载框
          this.isLoading = false;

          // 返回上一级页面
          this.$router.back();
        } else {
          this.$message({type: 'error', message: res.msg});

          // 关闭加载框
          this.isLoading = false;
        }
      });
    },
    // 返回事件
    cancel() {
      this.$router.back();
    },
    // 选中所有
    checkAll(){
      // this.checkedMenuIdList = [];
      // this.selectedMenuIdList = [];
      // this.$refs.tree.setCheckedNodes(this.allMenuList);

      AllTreeMenuNodeList().then(res => {
        if (res.success) {
          this.checkedMenuIdList = [];
          this.selectedMenuIdList = [];
          this.$refs.tree.setCheckedNodes(res.data);
        } else {
          this.$message({type: 'error', message: res.msg});
        }
      });
    },
    // 清空所有
    clearAll() {
      this.checkedMenuIdList = [];
      this.selectedMenuIdList = [];
      this.$refs.tree.setCheckedKeys([]);
    }
  },
};
</script>

<style>
  .el-col { border-radius: 4px; }
  .bg-purple-dark { background: #99a9bf; }
  .bg-purple { background: #d3dce6; }
  .bg-purple-light { background: #e5e9f2; }
  .grid-content { border-radius: 4px; min-height: 36px; }
</style>
